<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">Volcreate - blog</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/lib/typo/typo.css" th:href="@{/lib/typo/typo.css}">
    <link rel="stylesheet" href="../static/lib/animate/animate.css" th:href="@{/lib/animate/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/mine.css" th:href="@{/css/mine.css}">
</head>

<body>

<!--导航-->
<nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
    <!--tb : top and bottom-->
    <div class="ui container">
        <div>
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui header item">Volcreate</h2>
                <a href="#" th:href="@{/}" th:classappend="${n==1} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="home icon"></i><span th:text="#{nav.index}">首页</span></a>
                <a href="#" th:href="@{/fast}" th:classappend="${n==2} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="idea icon"></i>博客筛选</a>
                <a href="#" th:href="@{/blogs}" th:classappend="${n==3} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="blogger icon"></i>博客</a>
                <a href="#" th:href="@{/archive}" th:classappend="${n==4} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="clone icon"></i>归档</a>
                <a href="#" th:href="@{/more}" th:classappend="${n==5} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="bars icon"></i>更多</a>
                <a href="#" th:href="@{/about}" th:classappend="${n==6} ? 'active'" class="m-item item m-mobile-hide"><i
                        class="info icon"></i><span th:text="#{nav.about}">关于我</span></a>

                <div class="right m-item item m-mobile-hide">
                    <form name="search" action="#" method="post" th:action="@{/search}" target="_blank">
                        <div class="ui inverted transparent m-padded-tb-small input icon">
                            <input type="text" name="query" placeholder="Search..." th:value="${query}">
                            <i onclick="document.forms['search'].submit()"
                               class="inverted circular search link icon"></i>
                        </div>
                    </form>
                </div>
                <!--登录管理-->
                <div class="right m-mobile-hideitem m-mobile-hide menu" th:if="${session.user} != null" id="dropdownu">
                    <div class="ui dropdown item">
                        <div class="text">
                            <img class="ui avatar image" src="../static/images/c1.jpeg"
                                 th:src="@{${session.user.avatar}}" alt="">
                            <span th:text="${session.user.nickname}">zxc</span>
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu dropdownx">
                            <a href="#" th:href="@{/admin}" class="item">发布～</a>
                            <a href="#" th:href="@{/admin/logout}" class="item">注销~</a>
                        </div>
<!--                        <div class="menu dropdownx"></div>-->
                    </div>
                </div>
                <a href="admin/blogs.html" th:if="${session.user} == null" th:href="@{/admin}" target="_blank"
                   class="m-item item m-mobile-hide">
                    <i class="user md icon"></i>登录
                </a>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--底部footer-->
<footer th:fragment="footer" class="ui vertical basic segment m-padded-tb-big">
    <div class="ui center aligned container">
        <p class="m-opacity-mini" th:text="|Version #{version}|">0.0.2</p>
        <p class="m-text-thin m-text-spaced m-opacity-mini m-opacity-tiny"> Copyright © 2020 - 2021 Volcreate Designed
            by zxc </p>
    </div>
</footer>


<th:block th:fragment="script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/lib/scrollTo/jquery.scrollTo.min.js"
            th:src="@{/lib/scrollTo/jquery.scrollTo.min.js}"></script>
    <script src="../static/lib/waypoints/jquery.waypoints.min.js"
            th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
    <script src="../static/js/mine.js" th:src="@{/js/mine.js}"></script>
    <!--    <script>-->
    <!--        $('#latestBlogs-container').load(/*[[@{/footer/latestBlogs}]]*/"/footer/latestBlogs")-->
    <!--    </script>-->
</th:block>

</body>
</html>